/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { ModalForm } from '@ant-design/pro-form';
import { Divider, Col, Row } from 'antd';
import { getRanString } from '@/pages/sms/TemplateAudit/components/utils';
import type { StringObjType } from '../../AmountApply/index.d';

const FailReason: React.FC<{ fail_reasons: [] }> = (props) => {
  const { fail_reasons } = props;
  return (
    <ModalForm
      title='失败原因'
      trigger={<a style={{ color: 'red' }}>查看失败原因</a>}
      width={400}
      modalProps={{
        destroyOnClose: true,
        footer: null,
        centered: true,
      }}
      submitter={false}
    >
      {fail_reasons.map((item: StringObjType) => (
        <div key={getRanString()}>
          <Row>
            <Col span={24} style={{ textAlign: 'center' }}>
              {item?.created_at}
            </Col>
            <Col style={{ textAlign: 'center' }} span={24}>
              {item?.reason}
            </Col>
          </Row>
          <Divider />
        </div>
      ))}
    </ModalForm>
  );
};

export default FailReason;
